<template>
    <div :class="`tech-select-address ${mode}`">
        <div class="shop-address-list" v-if="addressList.length > 0">
            <AddressListItem v-for="(item, idx) in addressList" :key="idx" :info="item" :isSelect="isSelectItem(item)" :mode="mode" :styleMode="styleMode" :theme="theme" />
        </div>
        <Empty v-else type="location" :isFullPage="true" msg="暂无收货地址" :mode="mode" />
        <AddAddressBtn :mode="mode" :styleMode="styleMode" :theme="theme" />
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Empty } from '@components/base';
import AddressListItem from './components/AddressListItem';
import AddAddressBtn from './components/AddAddressBtn';
import { setTitle } from '@common/utils';
import { PageMixin } from '@common/mixin';

export default {
    name: 'ShopSelectAddress', // 商店选择地址
    mixins: [PageMixin],
    components: {
        Empty,
        AddressListItem,
        AddAddressBtn,
    },
    data() {
        return {};
    },
    computed: {
        ...mapState({
            addressList: state => state.address.addressList,
            addressInfo: state => state.review.addressInfo,
        }),
        isSelectItem() {
            return item => {
                return this.addressInfo ? this.addressInfo.id === item.id : false;
            };
        },
    },
    async mounted() {
        setTitle('收货地址');
        await this.getAddressList();
    },
    methods: {
        ...mapActions([
            'getAddressList',
        ]),
    },
};
</script>

<style lang="less">
.tech-select-address {
    min-height: 100vh;
    .mode-white();
    .shop-address-list {
        .p-t(@shop-bag-gap);
    }
    &.white {
        background-color: @shop-bg-color;
    }
    &.black {
        background-color: @black;
        .shop-address-list {
            background-color: @black-bg-color;
        }
    }
}
</style>
